<template>
  <div class="builtin-components">
    <!-- 页面标题 -->
    <div class="title-section">
      <h1 class="title">Vue 内置组件教程</h1>
      <p class="subtitle">掌握 Transition、Teleport、Suspense、Keep-alive 等内置组件的使用</p>
    </div>

    <!-- 组件导航 -->
    <div class="component-nav">
      <button 
        v-for="component in components" 
        :key="component.id"
        @click="activeComponent = component.id"
        :class="['nav-btn', { active: activeComponent === component.id }]"
      >
        {{ component.name }}
      </button>
    </div>

    <!-- Transition 组件 -->
    <div v-if="activeComponent === 'transition'" class="section">
      <h2>🎭 Transition 过渡组件</h2>
      <p>为单个元素或组件提供进入/离开过渡效果</p>

      <!-- 基础过渡 -->
      <div class="demo-container">
        <div class="demo-section">
          <h3>基础过渡效果</h3>
          <div class="demo-controls">
            <button @click="showBasic = !showBasic" class="demo-btn">
              {{ showBasic ? '隐藏' : '显示' }} 元素
            </button>
          </div>
          <div class="demo-area">
            <transition name="fade">
              <div v-if="showBasic" class="transition-box fade-box">
                淡入淡出效果
              </div>
            </transition>
          </div>
        </div>

        <div class="demo-section">
          <h3>滑动过渡</h3>
          <div class="demo-controls">
            <button @click="showSlide = !showSlide" class="demo-btn">
              {{ showSlide ? '隐藏' : '显示' }} 元素
            </button>
          </div>
          <div class="demo-area">
            <transition name="slide">
              <div v-if="showSlide" class="transition-box slide-box">
                滑动进入效果
              </div>
            </transition>
          </div>
        </div>

        <div class="demo-section">
          <h3>缩放过渡</h3>
          <div class="demo-controls">
            <button @click="showScale = !showScale" class="demo-btn">
              {{ showScale ? '隐藏' : '显示' }} 元素
            </button>
          </div>
          <div class="demo-area">
            <transition name="scale">
              <div v-if="showScale" class="transition-box scale-box">
                缩放效果
              </div>
            </transition>
          </div>
        </div>
      </div>

      <!-- 过渡模式 -->
      <div class="demo-container">
        <h3>过渡模式演示</h3>
        <div class="demo-controls">
          <button @click="toggleMode" class="demo-btn">
            切换模式 (当前: {{ currentMode }})
          </button>
        </div>
        <div class="demo-area">
          <transition name="mode" mode="out-in">
            <div v-if="currentMode === 'A'" key="A" class="mode-box mode-a">
              模式 A
            </div>
            <div v-else key="B" class="mode-box mode-b">
              模式 B
            </div>
          </transition>
        </div>
      </div>

      <!-- 列表过渡 -->
      <div class="demo-container">
        <h3>列表过渡 (TransitionGroup)</h3>
        <div class="demo-controls">
          <button @click="addItem" class="demo-btn">添加项目</button>
          <button @click="removeItem" class="demo-btn">删除项目</button>
          <button @click="shuffleItems" class="demo-btn">随机排序</button>
        </div>
        <div class="demo-area">
          <transition-group name="list" tag="div" class="list-container">
            <div 
              v-for="item in listItems" 
              :key="item.id" 
              class="list-item"
              @click="removeSpecificItem(item.id)"
            >
              {{ item.text }}
            </div>
          </transition-group>
        </div>
      </div>

      <!-- 代码示例 -->
      <div class="code-section">
        <h3>代码示例</h3>
        <pre><code><!-- 基础过渡 -->
&lt;transition name="fade"&gt;
  &lt;div v-if="show"&gt;内容&lt;/div&gt;
&lt;/transition&gt;

&lt;!-- CSS 样式 --&gt;
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

&lt;!-- 列表过渡 --&gt;
&lt;transition-group name="list" tag="div"&gt;
  &lt;div v-for="item in items" :key="item.id"&gt;
    item.text
  &lt;/div&gt;
&lt;/transition-group&gt;</code></pre>
      </div>
    </div>

    <!-- Teleport 组件 -->
    <div v-if="activeComponent === 'teleport'" class="section">
      <h2>🚀 Teleport 传送组件</h2>
      <p>将组件内容渲染到 DOM 树的其他位置</p>

      <!-- 模态框示例 -->
      <div class="demo-container">
        <h3>模态框传送</h3>
        <div class="demo-controls">
          <button @click="showModal = !showModal" class="demo-btn">
            {{ showModal ? '关闭' : '打开' }} 模态框
          </button>
        </div>
        <div class="demo-area">
          <p>这是页面内容，模态框会传送到 body 元素下</p>
          
          <!-- 传送到 body -->
          <teleport to="body">
            <div v-if="showModal" class="modal-overlay" @click="showModal = false">
              <div class="modal-content" @click.stop>
                <h3>传送的模态框</h3>
                <p>这个模态框通过 Teleport 传送到了 body 元素下</p>
                <button @click="showModal = false" class="close-btn">关闭</button>
              </div>
            </div>
          </teleport>
        </div>
      </div>

      <!-- 通知示例 -->
      <div class="demo-container">
        <h3>通知传送</h3>
        <div class="demo-controls">
          <button @click="showNotification" class="demo-btn">显示通知</button>
        </div>
        <div class="demo-area">
          <p>点击按钮显示传送到页面顶部的通知</p>
          
          <!-- 传送到指定元素 -->
          <teleport to="#notification-container">
            <transition name="notification">
              <div v-if="notificationVisible" class="notification">
                <span>这是一个传送的通知消息！</span>
                <button @click="notificationVisible = false" class="notification-close">×</button>
              </div>
            </transition>
          </teleport>
        </div>
      </div>

      <!-- 条件传送 -->
      <div class="demo-container">
        <h3>条件传送</h3>
        <div class="demo-controls">
          <button @click="enableTeleport = !enableTeleport" class="demo-btn">
            {{ enableTeleport ? '禁用' : '启用' }} 传送
          </button>
          <button @click="showTeleportContent = !showTeleportContent" class="demo-btn">
            {{ showTeleportContent ? '隐藏' : '显示' }} 内容
          </button>
        </div>
        <div class="demo-area">
          <div class="teleport-source">
            <p>原始位置容器</p>
            <teleport :to="enableTeleport ? '#teleport-target' : null" :disabled="!enableTeleport">
              <div v-if="showTeleportContent" class="teleport-content">
                {{ enableTeleport ? '我被传送了！' : '我在原始位置' }}
              </div>
            </teleport>
          </div>
          <div id="teleport-target" class="teleport-target">
            <p>传送目标容器</p>
          </div>
        </div>
      </div>

      <!-- 代码示例 -->
      <div class="code-section">
        <h3>代码示例</h3>
        <pre><code>&lt;!-- 基础传送 --&gt;
&lt;teleport to="body"&gt;
  &lt;div class="modal"&gt;模态框内容&lt;/div&gt;
&lt;/teleport&gt;

&lt;!-- 条件传送 --&gt;
&lt;teleport :to="target" :disabled="!enabled"&gt;
  &lt;div&gt;内容&lt;/div&gt;
&lt;/teleport&gt;

&lt;!-- 传送到指定选择器 --&gt;
&lt;teleport to="#app"&gt;
  &lt;div&gt;传送到 #app 元素&lt;/div&gt;
&lt;/teleport&gt;</code></pre>
      </div>
    </div>

    <!-- Suspense 组件 -->
    <div v-if="activeComponent === 'suspense'" class="section">
      <h2>⏳ Suspense 异步组件</h2>
      <p>处理异步组件的加载状态</p>

      <!-- 基础异步加载 -->
      <div class="demo-container">
        <h3>异步组件加载</h3>
        <div class="demo-controls">
          <button @click="loadAsyncComponent" class="demo-btn">加载异步组件</button>
          <button @click="resetAsyncComponent" class="demo-btn">重置</button>
        </div>
        <div class="demo-area">
          <suspense v-if="showAsyncComponent">
            <template #default>
              <async-demo-component :delay="asyncDelay" />
            </template>
            <template #fallback>
              <div class="loading-fallback">
                <div class="spinner"></div>
                <p>正在加载异步组件...</p>
              </div>
            </template>
          </suspense>
        </div>
      </div>

      <!-- 嵌套异步组件 -->
      <div class="demo-container">
        <h3>嵌套异步组件</h3>
        <div class="demo-controls">
          <button @click="loadNestedAsync" class="demo-btn">加载嵌套组件</button>
          <button @click="resetNestedAsync" class="demo-btn">重置</button>
        </div>
        <div class="demo-area">
          <suspense v-if="showNestedAsync">
            <template #default>
              <nested-async-component />
            </template>
            <template #fallback>
              <div class="loading-fallback">
                <div class="spinner"></div>
                <p>正在加载嵌套异步组件...</p>
              </div>
            </template>
          </suspense>
        </div>
      </div>

      <!-- 错误处理 -->
      <div class="demo-container">
        <h3>错误处理</h3>
        <div class="demo-controls">
          <button @click="loadErrorComponent" class="demo-btn">加载会出错的组件</button>
          <button @click="resetErrorComponent" class="demo-btn">重置</button>
        </div>
        <div class="demo-area">
          <suspense v-if="showErrorComponent">
            <template #default>
              <error-async-component />
            </template>
            <template #fallback>
              <div class="loading-fallback">
                <div class="spinner"></div>
                <p>正在加载组件...</p>
              </div>
            </template>
          </suspense>
        </div>
      </div>

      <!-- 代码示例 -->
      <div class="code-section">
        <h3>代码示例</h3>
        <pre><code>&lt;!-- 基础 Suspense --&gt;
&lt;suspense&gt;
  &lt;template #default&gt;
    &lt;async-component /&gt;
  &lt;/template&gt;
  &lt;template #fallback&gt;
    &lt;div&gt;Loading...&lt;/div&gt;
  &lt;/template&gt;
&lt;/suspense&gt;

&lt;!-- 异步组件定义 --&gt;
const AsyncComponent = defineAsyncComponent(() =&gt; {
  return new Promise((resolve) =&gt; {
    setTimeout(() =&gt; {
      resolve({
        template: '&lt;div&gt;异步组件内容&lt;/div&gt;'
      })
    }, 2000)
  })
})</code></pre>
      </div>
    </div>

    <!-- Keep-alive 组件 -->
    <div v-if="activeComponent === 'keepalive'" class="section">
      <h2>💾 Keep-alive 缓存组件</h2>
      <p>缓存组件实例，避免重复创建和销毁</p>

      <!-- 基础缓存 -->
      <div class="demo-container">
        <h3>基础组件缓存</h3>
        <div class="demo-controls">
          <button 
            v-for="tab in cacheTabs" 
            :key="tab.id"
            @click="activeCacheTab = tab.id"
            :class="['tab-btn', { active: activeCacheTab === tab.id }]"
          >
            {{ tab.name }}
          </button>
        </div>
        <div class="demo-area">
          <keep-alive>
            <component :is="currentCacheComponent" :key="activeCacheTab" />
          </keep-alive>
        </div>
      </div>

      <!-- 条件缓存 -->
      <div class="demo-container">
        <h3>条件缓存 (include/exclude)</h3>
        <div class="demo-controls">
          <label>
            <input type="checkbox" v-model="includeCounter"> 缓存计数器
          </label>
          <label>
            <input type="checkbox" v-model="includeTimer"> 缓存计时器
          </label>
          <button 
            v-for="tab in conditionalTabs" 
            :key="tab.id"
            @click="activeConditionalTab = tab.id"
            :class="['tab-btn', { active: activeConditionalTab === tab.id }]"
          >
            {{ tab.name }}
          </button>
        </div>
        <div class="demo-area">
          <keep-alive :include="includeComponents">
            <component :is="currentConditionalComponent" :key="activeConditionalTab" />
          </keep-alive>
        </div>
      </div>

      <!-- 最大缓存数量 -->
      <div class="demo-container">
        <h3>最大缓存数量 (max)</h3>
        <div class="demo-controls">
          <label>
            最大缓存数量: 
            <input type="number" v-model.number="maxCache" min="1" max="5">
          </label>
          <button 
            v-for="tab in maxCacheTabs" 
            :key="tab.id"
            @click="activeMaxCacheTab = tab.id"
            :class="['tab-btn', { active: activeMaxCacheTab === tab.id }]"
          >
            {{ tab.name }}
          </button>
        </div>
        <div class="demo-area">
          <keep-alive :max="maxCache">
            <component :is="currentMaxCacheComponent" :key="activeMaxCacheTab" />
          </keep-alive>
          <div class="cache-info">
            <p>当前最大缓存数量: {{ maxCache }}</p>
            <p>切换不同标签页观察缓存效果</p>
          </div>
        </div>
      </div>

      <!-- 代码示例 -->
      <div class="code-section">
        <h3>代码示例</h3>
        <pre><code>&lt;!-- 基础缓存 --&gt;
&lt;keep-alive&gt;
  &lt;component :is="currentComponent" /&gt;
&lt;/keep-alive&gt;

&lt;!-- 条件缓存 --&gt;
&lt;keep-alive include="ComponentA,ComponentB"&gt;
  &lt;component :is="currentComponent" /&gt;
&lt;/keep-alive&gt;

&lt;keep-alive :include="['ComponentA', 'ComponentB']"&gt;
  &lt;component :is="currentComponent" /&gt;
&lt;/keep-alive&gt;

&lt;keep-alive exclude="ComponentC"&gt;
  &lt;component :is="currentComponent" /&gt;
&lt;/keep-alive&gt;

&lt;!-- 最大缓存数量 --&gt;
&lt;keep-alive :max="3"&gt;
  &lt;component :is="currentComponent" /&gt;
&lt;/keep-alive&gt;</code></pre>
      </div>
    </div>

    <!-- 综合示例 -->
    <div v-if="activeComponent === 'comprehensive'" class="section">
      <h2>🎯 综合应用示例</h2>
      <p>结合多个内置组件的实际应用场景</p>

      <!-- 应用示例 -->
      <div class="demo-container">
        <h3>完整应用示例</h3>
        <div class="demo-controls">
          <button @click="showApp = !showApp" class="demo-btn">
            {{ showApp ? '关闭' : '打开' }} 应用
          </button>
        </div>
        <div class="demo-area">
          <transition name="app">
            <div v-if="showApp" class="comprehensive-app">
              <!-- 应用头部 -->
              <header class="app-header">
                <h3>综合示例应用</h3>
                <button @click="showAppModal = true" class="header-btn">设置</button>
              </header>

              <!-- 应用内容 -->
              <main class="app-main">
                <nav class="app-nav">
                  <button 
                    v-for="page in appPages" 
                    :key="page.id"
                    @click="activeAppPage = page.id"
                    :class="['nav-item', { active: activeAppPage === page.id }]"
                  >
                    {{ page.name }}
                  </button>
                </nav>

                <div class="app-content">
                  <suspense>
                    <template #default>
                      <keep-alive :include="cachedPages">
                        <component :is="currentAppComponent" :key="activeAppPage" />
                      </keep-alive>
                    </template>
                    <template #fallback>
                      <div class="app-loading">
                        <div class="spinner"></div>
                        <p>加载中...</p>
                      </div>
                    </template>
                  </suspense>
                </div>
              </main>

              <!-- 传送的模态框 -->
              <teleport to="body">
                <transition name="modal">
                  <div v-if="showAppModal" class="app-modal-overlay" @click="showAppModal = false">
                    <div class="app-modal-content" @click.stop>
                      <h3>应用设置</h3>
                      <div class="setting-item">
                        <label>
                          <input type="checkbox" v-model="enablePageCache"> 启用页面缓存
                        </label>
                      </div>
                      <div class="setting-item">
                        <label>
                          主题: 
                          <select v-model="appTheme">
                            <option value="light">浅色</option>
                            <option value="dark">深色</option>
                          </select>
                        </label>
                      </div>
                      <div class="modal-actions">
                        <button @click="showAppModal = false" class="modal-btn">关闭</button>
                      </div>
                    </div>
                  </div>
                </transition>
              </teleport>
            </div>
          </transition>
        </div>
      </div>
    </div>

    <!-- 最佳实践 -->
    <div class="best-practices">
      <h2>💡 最佳实践</h2>
      <div class="practice-grid">
        <div class="practice-card">
          <div class="practice-icon">🎭</div>
          <h4>Transition</h4>
          <ul>
            <li>为过渡效果命名，便于管理</li>
            <li>使用 CSS 变量控制过渡时间</li>
            <li>考虑性能，避免过度复杂的动画</li>
            <li>为列表过渡提供唯一 key</li>
          </ul>
        </div>
        <div class="practice-card">
          <div class="practice-icon">🚀</div>
          <h4>Teleport</h4>
          <ul>
            <li>确保目标元素存在</li>
            <li>使用条件渲染控制传送</li>
            <li>注意样式继承问题</li>
            <li>避免传送到动态元素</li>
          </ul>
        </div>
        <div class="practice-card">
          <div class="practice-icon">⏳</div>
          <h4>Suspense</h4>
          <ul>
            <li>提供有意义的加载状态</li>
            <li>处理异步组件错误</li>
            <li>避免嵌套过深</li>
            <li>考虑用户体验</li>
          </ul>
        </div>
        <div class="practice-card">
          <div class="practice-icon">💾</div>
          <h4>Keep-alive</h4>
          <ul>
            <li>合理使用 include/exclude</li>
            <li>设置合适的 max 值</li>
            <li>注意内存使用</li>
            <li>清理组件状态</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 练习任务 -->
    <div class="exercise-section">
      <h2>🎯 练习任务</h2>
      <div class="exercise-list">
        <div class="exercise-item">
          <h4>任务 1: 创建页面切换动画</h4>
          <p>使用 Transition 组件为路由切换添加滑动动画效果</p>
        </div>
        <div class="exercise-item">
          <h4>任务 2: 实现全局通知系统</h4>
          <p>使用 Teleport 组件创建一个全局通知系统，通知显示在页面顶部</p>
        </div>
        <div class="exercise-item">
          <h4>任务 3: 优化异步组件加载</h4>
          <p>使用 Suspense 组件为异步加载的图表组件添加加载状态</p>
        </div>
        <div class="exercise-item">
          <h4>任务 4: 实现标签页缓存</h4>
          <p>使用 Keep-alive 组件实现标签页系统，缓存用户输入的表单数据</p>
        </div>
        <div class="exercise-item">
          <h4>任务 5: 综合应用</h4>
          <p>结合所有内置组件创建一个完整的单页应用，包含路由动画、模态框、异步加载和页面缓存</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 通知容器 -->
  <div id="notification-container" class="notification-container"></div>
</template>

<script>
import { defineAsyncComponent } from 'vue'

// 异步组件定义
const AsyncDemoComponent = defineAsyncComponent(() => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        template: `
          <div class="async-content">
            <h4>异步组件已加载</h4>
            <p>延迟时间: {{ delay }}ms</p>
            <div class="async-data">
              <p>模拟数据: {{ Math.random().toFixed(4) }}</p>
              <p>加载时间: {{ new Date().toLocaleTimeString() }}</p>
            </div>
          </div>
        `,
        props: ['delay'],
        data() {
          return {
            Math,
            Date
          }
        }
      })
    }, 2000)
  })
})

const NestedAsyncComponent = defineAsyncComponent(() => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        template: `
          <div class="nested-async">
            <h4>嵌套异步组件</h4>
            <suspense>
              <template #default>
                <inner-async-component />
              </template>
              <template #fallback>
                <div class="inner-loading">加载内部组件...</div>
              </template>
            </suspense>
          </div>
        `,
        components: {
          InnerAsyncComponent: defineAsyncComponent(() => {
            return new Promise((resolve) => {
              setTimeout(() => {
                resolve({
                  template: '<div class="inner-content">内部异步组件内容</div>'
                })
              }, 1500)
            })
          })
        }
      })
    }, 1000)
  })
})

const ErrorAsyncComponent = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.5) {
        resolve({
          template: '<div class="success-content">组件加载成功！</div>'
        })
      } else {
        reject(new Error('模拟加载失败'))
      }
    }, 2000)
  })
})

// 缓存组件
const CacheComponentA = {
  name: 'CacheComponentA',
  template: `
    <div class="cache-component">
      <h4>组件 A</h4>
      <p>计数器: {{ count }}</p>
      <button @click="count++" class="count-btn">增加</button>
      <div class="component-info">
        <p>创建时间: {{ createdTime }}</p>
        <p>这个组件会被缓存</p>
      </div>
    </div>
  `,
  data() {
    return {
      count: 0,
      createdTime: new Date().toLocaleTimeString()
    }
  },
  activated() {
    console.log('组件 A 被激活')
  },
  deactivated() {
    console.log('组件 A 被停用')
  }
}

const CacheComponentB = {
  name: 'CacheComponentB',
  template: `
    <div class="cache-component">
      <h4>组件 B</h4>
      <p>输入内容: {{ text }}</p>
      <input v-model="text" placeholder="输入一些文字" class="cache-input">
      <div class="component-info">
        <p>创建时间: {{ createdTime }}</p>
        <p>这个组件会被缓存</p>
      </div>
    </div>
  `,
  data() {
    return {
      text: '',
      createdTime: new Date().toLocaleTimeString()
    }
  },
  activated() {
    console.log('组件 B 被激活')
  },
  deactivated() {
    console.log('组件 B 被停用')
  }
}

const CacheComponentC = {
  name: 'CacheComponentC',
  template: `
    <div class="cache-component">
      <h4>组件 C</h4>
      <p>计时器: {{ timer }}s</p>
      <button @click="startTimer" class="timer-btn">开始计时</button>
      <button @click="stopTimer" class="timer-btn">停止计时</button>
      <div class="component-info">
        <p>创建时间: {{ createdTime }}</p>
        <p>这个组件不会被缓存</p>
      </div>
    </div>
  `,
  data() {
    return {
      timer: 0,
      interval: null,
      createdTime: new Date().toLocaleTimeString()
    }
  },
  methods: {
    startTimer() {
      if (!this.interval) {
        this.interval = setInterval(() => {
          this.timer++
        }, 1000)
      }
    },
    stopTimer() {
      if (this.interval) {
        clearInterval(this.interval)
        this.interval = null
      }
    }
  },
  beforeUnmount() {
    this.stopTimer()
  },
  activated() {
    console.log('组件 C 被激活')
  },
  deactivated() {
    console.log('组件 C 被停用')
  }
}

// 应用页面组件
const AppPageHome = defineAsyncComponent(() => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        name: 'AppPageHome',
        template: `
          <div class="app-page">
            <h4>首页</h4>
            <p>欢迎来到首页</p>
            <div class="page-content">
              <p>页面创建时间: {{ createdTime }}</p>
              <p>访问次数: {{ visitCount }}</p>
            </div>
          </div>
        `,
        data() {
          return {
            createdTime: new Date().toLocaleTimeString(),
            visitCount: 1
          }
        },
        activated() {
          this.visitCount++
        }
      })
    }, 500)
  })
})

const AppPageProfile = defineAsyncComponent(() => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        name: 'AppPageProfile',
        template: `
          <div class="app-page">
            <h4>个人资料</h4>
            <div class="profile-form">
              <input v-model="name" placeholder="姓名" class="profile-input">
              <input v-model="email" placeholder="邮箱" class="profile-input">
              <textarea v-model="bio" placeholder="个人简介" class="profile-textarea"></textarea>
            </div>
            <div class="page-content">
              <p>页面创建时间: {{ createdTime }}</p>
            </div>
          </div>
        `,
        data() {
          return {
            name: '',
            email: '',
            bio: '',
            createdTime: new Date().toLocaleTimeString()
          }
        }
      })
    }, 800)
  })
})

const AppPageSettings = defineAsyncComponent(() => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        name: 'AppPageSettings',
        template: `
          <div class="app-page">
            <h4>设置</h4>
            <div class="settings-list">
              <label class="setting-item">
                <input type="checkbox" v-model="notifications"> 启用通知
              </label>
              <label class="setting-item">
                <input type="checkbox" v-model="darkMode"> 深色模式
              </label>
              <div class="setting-item">
                <span>语言: </span>
                <select v-model="language">
                  <option value="zh">中文</option>
                  <option value="en">English</option>
                </select>
              </div>
            </div>
            <div class="page-content">
              <p>页面创建时间: {{ createdTime }}</p>
            </div>
          </div>
        `,
        data() {
          return {
            notifications: true,
            darkMode: false,
            language: 'zh',
            createdTime: new Date().toLocaleTimeString()
          }
        }
      })
    }, 600)
  })
})

export default {
  name: 'BuiltinComponents',
  components: {
    AsyncDemoComponent,
    NestedAsyncComponent,
    ErrorAsyncComponent,
    CacheComponentA,
    CacheComponentB,
    CacheComponentC,
    AppPageHome,
    AppPageProfile,
    AppPageSettings
  },
  data() {
    return {
      // 组件导航
      activeComponent: 'transition',
      components: [
        { id: 'transition', name: 'Transition' },
        { id: 'teleport', name: 'Teleport' },
        { id: 'suspense', name: 'Suspense' },
        { id: 'keepalive', name: 'Keep-alive' },
        { id: 'comprehensive', name: '综合示例' }
      ],
      
      // Transition 相关
      showBasic: false,
      showSlide: false,
      showScale: false,
      currentMode: 'A',
      listItems: [
        { id: 1, text: '项目 1' },
        { id: 2, text: '项目 2' },
        { id: 3, text: '项目 3' }
      ],
      nextId: 4,
      
      // Teleport 相关
      showModal: false,
      notificationVisible: false,
      enableTeleport: true,
      showTeleportContent: false,
      
      // Suspense 相关
      showAsyncComponent: false,
      asyncDelay: 2000,
      showNestedAsync: false,
      showErrorComponent: false,
      
      // Keep-alive 相关
      activeCacheTab: 'a',
      cacheTabs: [
        { id: 'a', name: '组件 A', component: 'CacheComponentA' },
        { id: 'b', name: '组件 B', component: 'CacheComponentB' },
        { id: 'c', name: '组件 C', component: 'CacheComponentC' }
      ],
      
      // 条件缓存
      activeConditionalTab: 'a',
      conditionalTabs: [
        { id: 'a', name: '计数器', component: 'CacheComponentA' },
        { id: 'b', name: '输入框', component: 'CacheComponentB' },
        { id: 'c', name: '计时器', component: 'CacheComponentC' }
      ],
      includeCounter: true,
      includeTimer: false,
      
      // 最大缓存
      activeMaxCacheTab: 'home',
      maxCache: 2,
      maxCacheTabs: [
        { id: 'home', name: '首页', component: 'CacheComponentA' },
        { id: 'profile', name: '资料', component: 'CacheComponentB' },
        { id: 'settings', name: '设置', component: 'CacheComponentC' },
        { id: 'about', name: '关于', component: 'CacheComponentA' },
        { id: 'help', name: '帮助', component: 'CacheComponentB' }
      ],
      
      // 综合示例
      showApp: false,
      showAppModal: false,
      activeAppPage: 'home',
      appPages: [
        { id: 'home', name: '首页', component: 'AppPageHome' },
        { id: 'profile', name: '个人资料', component: 'AppPageProfile' },
        { id: 'settings', name: '设置', component: 'AppPageSettings' }
      ],
      enablePageCache: true,
      appTheme: 'light'
    }
  },
  computed: {
    currentCacheComponent() {
      const tab = this.cacheTabs.find(t => t.id === this.activeCacheTab)
      return tab ? tab.component : 'CacheComponentA'
    },
    currentConditionalComponent() {
      const tab = this.conditionalTabs.find(t => t.id === this.activeConditionalTab)
      return tab ? tab.component : 'CacheComponentA'
    },
    includeComponents() {
      const components = []
      if (this.includeCounter) components.push('CacheComponentA')
      if (this.includeTimer) components.push('CacheComponentC')
      return components
    },
    currentMaxCacheComponent() {
      const tab = this.maxCacheTabs.find(t => t.id === this.activeMaxCacheTab)
      return tab ? tab.component : 'CacheComponentA'
    },
    currentAppComponent() {
      const page = this.appPages.find(p => p.id === this.activeAppPage)
      return page ? page.component : 'AppPageHome'
    },
    cachedPages() {
      return this.enablePageCache ? ['AppPageHome', 'AppPageProfile'] : []
    }
  },
  methods: {
    // Transition 方法
    toggleMode() {
      this.currentMode = this.currentMode === 'A' ? 'B' : 'A'
    },
    addItem() {
      this.listItems.push({
        id: this.nextId++,
        text: `项目 ${this.nextId - 1}`
      })
    },
    removeItem() {
      if (this.listItems.length > 0) {
        this.listItems.pop()
      }
    },
    removeSpecificItem(id) {
      const index = this.listItems.findIndex(item => item.id === id)
      if (index > -1) {
        this.listItems.splice(index, 1)
      }
    },
    shuffleItems() {
      for (let i = this.listItems.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1))
        ;[this.listItems[i], this.listItems[j]] = [this.listItems[j], this.listItems[i]]
      }
    },
    
    // Teleport 方法
    showNotification() {
      this.notificationVisible = true
      setTimeout(() => {
        this.notificationVisible = false
      }, 3000)
    },
    
    // Suspense 方法
    loadAsyncComponent() {
      this.showAsyncComponent = true
    },
    resetAsyncComponent() {
      this.showAsyncComponent = false
    },
    loadNestedAsync() {
      this.showNestedAsync = true
    },
    resetNestedAsync() {
      this.showNestedAsync = false
    },
    loadErrorComponent() {
      this.showErrorComponent = true
    },
    resetErrorComponent() {
      this.showErrorComponent = false
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.builtin-components {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 标题区域 */
.title-section {
  text-align: center;
  margin-bottom: 40px;
}

.title {
  font-size: 3rem;
  margin: 0 0 10px 0;
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin: 0;
}

/* 组件导航 */
.component-nav {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.nav-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  font-size: 1rem;
}

.nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.nav-btn.active {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 章节样式 */
.section {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
  backdrop-filter: blur(10px);
}

.section h2 {
  margin: 0 0 20px 0;
  font-size: 2rem;
  text-align: center;
}

.section > p {
  text-align: center;
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 30px;
}

/* 演示容器 */
.demo-container {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 25px;
}

.demo-section {
  margin-bottom: 30px;
}

.demo-section:last-child {
  margin-bottom: 0;
}

.demo-section h3 {
  margin: 0 0 15px 0;
  color: #4facfe;
}

.demo-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.demo-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(45deg, #56ab2f, #a8e6cf);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.demo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.demo-area {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Transition 样式 */
.transition-box {
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  min-width: 200px;
}

.fade-box {
  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
}

.slide-box {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
}

.scale-box {
  background: linear-gradient(45deg, #56ab2f, #a8e6cf);
}

/* 过渡动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter-from {
  transform: translateX(-100px);
  opacity: 0;
}
.slide-leave-to {
  transform: translateX(100px);
  opacity: 0;
}

.scale-enter-active, .scale-leave-active {
  transition: all 0.5s ease;
}
.scale-enter-from, .scale-leave-to {
  transform: scale(0);
  opacity: 0;
}

.mode-enter-active, .mode-leave-active {
  transition: all 0.3s ease;
}
.mode-enter-from {
  transform: translateX(30px);
  opacity: 0;
}
.mode-leave-to {
  transform: translateX(-30px);
  opacity: 0;
}

.mode-box {
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  min-width: 150px;
}

.mode-a {
  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
}

.mode-b {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
}

/* 列表过渡 */
.list-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 300px;
  margin: 0 auto;
}

.list-item {
  background: linear-gradient(45deg, #56ab2f, #a8e6cf);
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  font-weight: 500;
}

.list-item:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.list-enter-active, .list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from, .list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.list-move {
  transition: transform 0.5s ease;
}

/* Teleport 样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 30px;
  border-radius: 15px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  color: white;
}

.modal-content h3 {
  margin: 0 0 15px 0;
  color: #4facfe;
}

.close-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
  color: white;
  cursor: pointer;
  margin-top: 15px;
}

.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.notification {
  background: linear-gradient(45deg, #56ab2f, #a8e6cf);
  padding: 15px 20px;
  border-radius: 8px;
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.notification-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-enter-active, .notification-leave-active {
  transition: all 0.3s ease;
}
.notification-enter-from, .notification-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.teleport-source, .teleport-target {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  margin: 10px 0;
  min-height: 80px;
}

.teleport-content {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
}

/* Suspense 样式 */
.loading-fallback {
  text-align: center;
  padding: 40px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #4facfe;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.async-content {
  background: linear-gradient(45deg, #56ab2f, #a8e6cf);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.async-data {
  background: rgba(255, 255, 255, 0.2);
  padding: 15px;
  border-radius: 8px;
  margin-top: 15px;
}

.nested-async {
  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.inner-loading {
  background: rgba(255, 255, 255, 0.2);
  padding: 15px;
  border-radius: 8px;
  margin-top: 15px;
}

.inner-content {
  background: rgba(255, 255, 255, 0.2);
  padding: 15px;
  border-radius: 8px;
  margin-top: 15px;
}

.success-content {
  background: linear-gradient(45deg, #56ab2f, #a8e6cf);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

/* Keep-alive 样式 */
.tab-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-right: 10px;
  margin-bottom: 10px;
}

.tab-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.tab-btn.active {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
}

.cache-component {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  min-height: 200px;
}

.count-btn, .timer-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(45deg, #56ab2f, #a8e6cf);
  color: white;
  cursor: pointer;
  margin: 5px;
}

.cache-input {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  width: 200px;
  margin-top: 10px;
}

.cache-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.component-info {
  background: rgba(255, 255, 255, 0.1);
  padding: 10px;
  border-radius: 6px;
  margin-top: 15px;
  font-size: 0.9rem;
}

.cache-info {
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 8px;
  margin-top: 15px;
  text-align: center;
}

/* 综合示例样式 */
.comprehensive-app {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto;
}

.app-header {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-header h3 {
  margin: 0;
  color: white;
}

.header-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
}

.app-main {
  display: flex;
  min-height: 400px;
}

.app-nav {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nav-item {
  padding: 10px 15px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s ease;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.2);
}

.nav-item.active {
  background: linear-gradient(45deg, #56ab2f, #a8e6cf);
}

.app-content {
  flex: 1;
  padding: 20px;
}

.app-loading {
  text-align: center;
  padding: 40px;
}

.app-page {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  min-height: 300px;
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 300px;
  margin: 0 auto;
}

.profile-input, .profile-textarea {
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.profile-input::placeholder, .profile-textarea::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.profile-textarea {
  min-height: 80px;
  resize: vertical;
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 300px;
  margin: 0 auto;
}

.setting-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1);
  padding: 10px 15px;
  border-radius: 6px;
}

.setting-item input, .setting-item select {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 5px;
  border-radius: 4px;
}

.page-content {
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
  text-align: center;
  font-size: 0.9rem;
}

/* 应用模态框 */
.app-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.app-modal-content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 30px;
  border-radius: 15px;
  max-width: 400px;
  width: 90%;
  color: white;
}

.app-modal-content h3 {
  margin: 0 0 20px 0;
  text-align: center;
  color: #4facfe;
}

.modal-actions {
  text-align: center;
  margin-top: 20px;
}

.modal-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(45deg, #56ab2f, #a8e6cf);
  color: white;
  cursor: pointer;
}

/* 应用过渡 */
.app-enter-active, .app-leave-active {
  transition: all 0.5s ease;
}
.app-enter-from, .app-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

.modal-enter-active, .modal-leave-active {
  transition: all 0.3s ease;
}
.modal-enter-from, .modal-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

/* 代码示例 */
.code-section {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 20px;
  margin-top: 30px;
}

.code-section h3 {
  margin: 0 0 15px 0;
  color: #4facfe;
}

.code-section pre {
  background: rgba(0, 0, 0, 0.5);
  padding: 15px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 0;
}

.code-section code {
  color: #a8e6cf;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* 最佳实践 */
.best-practices {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
}

.best-practices h2 {
  text-align: center;
  margin: 0 0 30px 0;
  font-size: 2rem;
}

.practice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.practice-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 25px;
  text-align: center;
  transition: all 0.3s ease;
}

.practice-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.practice-icon {
  font-size: 3rem;
  margin-bottom: 15px;
}

.practice-card h4 {
  margin: 0 0 15px 0;
  color: #4facfe;
  font-size: 1.3rem;
}

.practice-card ul {
  text-align: left;
  margin: 0;
  padding-left: 20px;
}

.practice-card li {
  margin-bottom: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* 练习任务 */
.exercise-section {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
}

.exercise-section h2 {
  text-align: center;
  margin: 0 0 30px 0;
  font-size: 2rem;
}

.exercise-list {
  display: grid;
  gap: 20px;
}

.exercise-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 25px;
  border-left: 5px solid #56ab2f;
  transition: all 0.3s ease;
}

.exercise-item:hover {
  transform: translateX(5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.exercise-item h4 {
  margin: 0 0 10px 0;
  color: #a8e6cf;
  font-size: 1.2rem;
}

.exercise-item p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0.9;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .builtin-components {
    padding: 15px;
  }
  
  .title {
    font-size: 2.5rem;
  }
  
  .component-nav {
    flex-direction: column;
    align-items: center;
  }
  
  .section {
    padding: 20px;
  }
  
  .demo-container {
    padding: 15px;
  }
  
  .demo-controls {
    flex-direction: column;
    align-items: center;
  }
  
  .practice-grid {
    grid-template-columns: 1fr;
  }
  
  .app-main {
    flex-direction: column;
  }
  
  .app-nav {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
  }
  
  .nav-item {
    white-space: nowrap;
  }
  
  .modal-content, .app-modal-content {
    margin: 20px;
    width: calc(100% - 40px);
  }
}

@media (max-width: 480px) {
  .title {
    font-size: 2rem;
  }
  
  .subtitle {
    font-size: 1rem;
  }
  
  .section h2 {
    font-size: 1.5rem;
  }
  
  .demo-area {
    padding: 15px;
  }
  
  .transition-box {
    min-width: 150px;
    padding: 15px;
  }
  
  .list-container {
    max-width: 250px;
  }
  
  .cache-input {
    width: 150px;
  }
  
  .profile-form {
    max-width: 250px;
  }
  
  .settings-list {
    max-width: 250px;
  }
}
</style>